<template>
  <div class="content-sub content gov-sub5">
    <div>
      <div class="sub-box4 gov-box">
        <div class="gov-title">
          <p>一次侧模拟<i class="gl"></i><i class="gl"></i></p>
        </div>
        <div class="by-box">
          <div class="by">
            <p>10kv#1进线</p>
            <p>1#</p>
            <div id="pip1"></div>
          </div>
          <div class="by">
              <p>10kv#2进线</p>
              <p>2#</p>
              <div id="pip2"></div>
            </div>
        </div>
        <div class="zx-pip-h"></div>
        <div class="zx-box">
          <div class="zx"     v-for="item in substationInfos" :key="item.index">
            <div class="zx-pip"></div>
            <p>{{item.name}}</p>
            <ul>
              <li><span>IA:</span> <span>{{item.IA}} A</span></li>
              <li><span>IB:</span> <span>{{item.IB}} A</span></li>
              <li><span>IC:</span> <span>{{item.IC}} A</span></li>
              <li><span>P:</span> <span>{{item.P}} kW</span></li>
              <li><span>负载率:</span> <span>{{item.loadrate}}%</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="sub-box5 gov-box" >
        <div class="sub2-data">
        <div class="sub2-data-box">
            <div class="sub2-data-p">
              <div><p>安全运行天数</p></div>
              <div class="sub2-data-num"> {{ safeDays }} <span>天</span></div>
              <div></div>
            </div>
          </div>
          <div class="sub2-data-box">
            <div class="sub2-data-p">
              <div><p>当前负荷总量</p><p>{{ allload.time }}</p></div>
              <div class="sub2-data-num">{{ allload.load }}<span>{{ allload.unit }}</span></div>
              <div></div>
            </div>
          </div>
          <div class="sub2-data-box">
            <div class="sub2-data-p">
              <div><p>监测点位</p></div>
              <div class="sub2-data-num">{{ meansureCount.allMeasureCount }} <span>个</span></div>
              <div><i class="fa fa-check-circle" aria-hidden="true"></i> {{ meansureCount.allMeasureCount-meansureCount.alarmMeasureCount-meansureCount.offlineMeasureCount }}</div>
              <div><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ meansureCount.alarmMeasureCount }}</div>
              <div><i class="fa fa-wifi" aria-hidden="true"></i> {{ meansureCount.offlineMeasureCount }}</div>
            </div>
          </div>
          <div class="sub2-data-box">
            <div class="sub2-data-p">
              <div><p>当前告警</p></div>
              <div class="sub2-data-num">{{ alarmCount }} <span>条</span></div>
              <div>详情 >></div>
            </div>
          </div>
          <div class="sub2-data-box">
            <div class="sub2-data-p">
              <div><p>配电房环境</p></div>
              <div>温度：{{ environment.temperture }}℃</div>
              <div>湿度：{{ environment.humidity }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div> 
      <div class="sub-box4 gov-box">
        <div class="gov-title">
          <p>负荷监测<i class="gl"></i><i class="gl"></i></p>
        </div>
        <chart :options="chart1" :theme="chartTheme"></chart> 
      </div>
    </div>
    <div>
      <div class="sub-box5 gov-box">
        <div class="sub2-table">
          <table>
            <thead>
              <tr>
                <th>名称</th>
                <th>电压不平衡度</th>
                <th>电流不不平衡度</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in imbalance" :key="item.index">
                <td>{{ item.name }}</td>
                <td>{{ item.U }}</td>
                <td>{{ item.I }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'governmentE',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#00e8cf','#3dbeff','#903bff','#d900c6'],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['1#主变','2#主变','3#主变','4#主变','5#主变','6#主变'],
          top: 10,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['1:00','1:05','1:10','1:15','1:20','1:25','1:30','1:35','1:40','1:45','1:50','1:55','2:00','2:05'],
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'1#主变',
            type:'line',
            stack: '总量',
            symbol: 'circle',
            smooth: true,
            areaStyle: {normal: {}},
            data:[120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
          },
          {
            name:'2#主变',
            type:'line',
            stack: '总量',
            symbol: 'circle',
            smooth: true,
            areaStyle: {normal: {}},
            data:[220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310]
          },
          {
            name:'3#主变',
            type:'line',
            stack: '总量',
            symbol: 'circle',
            smooth: true,
            areaStyle: {normal: {}},
            data:[150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410]
          },
          {
            name:'4#主变',
            type:'line',
            stack: '总量',
            symbol: 'circle',
            smooth: true,
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320]
          },
          {
            name:'5#主变',
            type:'line',
            stack: '总量',
            symbol: 'circle',
            smooth: true,
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320]
          },
          {
            name:'6#主变',
            type:'line',
            stack: '总量',
            symbol: 'circle',
            smooth: true,
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320]
          }
        ]
      },
      safeDays: '--',
      allload: {load:'--', time: "2018-08-07 00:00:00"},
      meansureCount: {},
      alarmCount: 0,
      environment: {},
      substationInfos: [],
      imbalance: []
    }
    
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })
    this.getData()
  },
  methods: {
    getData: function () {
      this.$http('/vqdisplay/jnpowerstation/data')
      .then( response => {
        let _data = response.data.body
        this.safeDays = _data.safe_days.days
        this.allload =  _data.allload
        this.meansureCount =  _data.meansure_count
        this.alarmCount =  _data.alarm_count.alarmCount
        this.environment = _data.environment

        this.substationInfos = _data.substation_infos
        this.imbalance = _data.imbalance

        if(_data.substation_power_line.series&&_data.substation_power_line.series.length!==0) {
          this.chart1.legenddata = _data.substation_power_line.legend
          this.chart1.xAxis[0].data = _data.substation_power_line.xAxis
          for (let i in _data.substation_power_line.legend) {
            let key = _data.substation_power_line.legend[i]
            this.chart1.series[i][name] = key
            this.chart1.series[i].data = _data.substation_power_line.series[i][key]
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  @import '../../../style/government.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>